<script setup lang="ts">
import { ref, toRefs, watch, onMounted, markRaw, onUnmounted } from 'vue';
import * as echarts from "echarts"
import { GetDeviceInfo } from '../../api'

// import eventBus from '../../libs/eventBus'

const props = defineProps(['deviceList', 'logList', 'sstInfo', 'errorList', 'alarmList'])
const { deviceList, logList, errorList, alarmList, sstInfo } = toRefs(props)

//点击获取设备详情
const deviceInfo = ref({})
const getDetails = (FEntryID: string) => {
    const post = {
        line: '1001',
        FEntryID,
    }
    GetDeviceInfo(post).then((res: any) => {
        if (res.code === 200) {
            deviceInfo.value = res.data[0]
        }
    })
}


// const rowList1 = Array.from({ length: 165 }, (item, index) => 'D' + String(index + 1))

//获取chart实例
const chart = ref()
//获取echarts
let myChart = ref()

const colorList = ['#fff', '#cece1d', '#67c23a', '#f56c6c', '#e6a23c']
const options = ref({
    title: {
        text: '单位：台',
        right: 15,
        bottom: 10,
        textStyle: {
            color: '#799ac1'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
    },
    legend: {
        width: 350,
        top: 35,
        left: 30,
        itemGap: 30,
        itemWidth: 20,
        itemHeight: 20,
        textStyle: {
            fontSize: 22,
            color: '#799ac1',
            // 文字块背景色，一定要加上，否则对齐不会生效
            backgroundColor: "transparent",
            rich: {
                b: {
                    width: 60,
                    fontSize: 22
                }
            }
        },
        formatter: (name: any) => {
            const series = myChart.value.getOption().series[0]
            const temp = series.data.filter((row: any) => row.name === name)
            const val = temp.length && temp[0].value || 0
            return `${name} {b|${val}}`
        }
    },
    series: [
        {
            type: 'pie',
            top: 150,
            radius: ['50%', '75%'],
            center: ['50%', '50%'],
            data: [],
            label: {
                show: false,
                color: '#799ac1',
                fontSize: 20,
                formatter: '{c}台'
            },
            labelLine: {
                length: 5,
                length2: 3
            }
        }
    ]
})
//状态统计
watch(
    () => props.sstInfo,
    (newVal, oldVal) => {
        // console.log('new', newVal)
        options.value.series[0].data = newVal.map((item: any, index: number) => {
            return {
                name: item.name,
                value: item.value,
                itemStyle: { color: colorList[index] }
            }
        })
        myChart.value.setOption(options.value)
    },
    {
        deep: true
    }
)

//使用eventBus声明开启接口的方法，便于设备控制调用
// eventBus.on('runApi', runApi)
onMounted(() => {
    myChart.value = markRaw(echarts.init(chart.value, 'white', { width: '340px', height: '400px' }))
    myChart.value.setOption(options.value)
})
window.addEventListener("resize", () => {
    myChart.value?.resize()
});

//卸载时销毁实例
onUnmounted(() => {
    window.removeEventListener("resize", myChart.value);
    // 卸载echarts实例
    myChart.value.dispose();
});
// 在组件卸载之前移除侦听
// onBeforeUnmount(() => {
//     eventBus.off('runApi', runApi)
// })
</script>

<template>
    <!-- 设备状态 -->
    <div class="flex content-center items-center justify-between">
        <div class="flex items-center">
            <p class="mr-5">设备状态</p>
            <div class="flex gap-2 btn-box">
                <el-button>离线</el-button>
                <el-button class="my-btn">待机</el-button>
                <el-button type="success">运行</el-button>
                <el-button type="warning">急停</el-button>
                <el-button type="danger">故障</el-button>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <!-- 设备行列 -->
        <div class="row flex flex-wrap mt-1 device-row">
            <div class="row-item text-center cursor-pointer" v-for="(item, index) in deviceList" :key="index"
                @click="getDetails(item.FEntryID)">
                <span v-if="item.UseStatus == 1 || item.UseStatus == 2 || item.UseStatus == 3">
                    <img v-if="item.Status === '0'" src="../../assets/0.png" />
                    <img v-else-if="item.Status === '1'" src="../../assets/1.png" />
                    <img v-else-if="item.Status === '2'" src="../../assets/2.png" />
                    <img v-else-if="item.Status === '3'" src="../../assets/3.png" />
                    <img v-else-if="item.Status === '4'" src="../../assets/4.png" />
                    <img v-else src="../../assets/6.png" />
                    <em v-if="item.UseStatus == 2" class="device-status">{{ item.Number }}</em>
                    <em v-else>{{ item.Number }}</em>
                </span>
            </div>
        </div>
    </div>

    <div class="flex justify-between mt-2">
        <!-- 设备信息 -->
        <div class="device-info" style="width: 15%">
            <div class="flex items-center">
                <p class="mb-2">设备信息</p>
            </div>
            <div class="flex flex-col device-box mt-1">
                <div class="flex items-center">
                    <span class="inline-block mr-2">设备编码:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.Number
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">设备名称:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.Name
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">流水线段:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.CName
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">&nbsp;IP&nbsp;地&nbsp;&nbsp;址:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.IP
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">运行速度:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.Velocity
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">设备状态:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.Status
                        }}</span>
                </div>
                <div class="flex items-center">
                    <span class="inline-block mr-2">端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;口:</span>
                    <span class="inline-block text-ellipsis overflow-hidden whitespace-nowrap">{{ deviceInfo.Port
                        }}</span>
                </div>
            </div>
        </div>
        <!-- 日志信息 -->
        <div class="log-info table-box" style="width: 31%" height="410">
            <p class="mb-2">日志信息</p>
            <el-table class="mt-1" :data="logList" height="410" style="width: 100%">
                <el-table-column align="center" prop="DateTime" label="时间" width="240" show-overflow-tooltip />
                <el-table-column align="center" prop="Name" label="设备名称" show-overflow-tooltip />
                <el-table-column align="center" prop="Description" label="事件信息" show-overflow-tooltip />
            </el-table>
        </div>
        <!-- 故障信息 -->
        <div class="error-info table-box" style="width: 17%" height="410">
            <p class="mb-2">故障信息(TOP10)</p>
            <el-table class="mt-1" :data="errorList" height="410" style="width: 100%">
                <el-table-column align="center" prop="number" label="序号" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Number" label="设备ID" show-overflow-tooltip />
                <el-table-column align="center" prop="Qty" label="次数" show-overflow-tooltip />
            </el-table>
        </div>
        <!-- 急停信息 -->
        <div class="error-info table-box" style="width: 17%" height="410">
            <p class="mb-2">急停信息(TOP10)</p>
            <el-table class="mt-1" :data="alarmList" height="410" style="width: 100%">
                <el-table-column align="center" prop="number" label="序号" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Number" label="设备ID" show-overflow-tooltip />
                <el-table-column align="center" prop="Qty" label="次数" show-overflow-tooltip />
            </el-table>
        </div>
        <!-- 设备状态统计信息 -->
        <div style="width: 18%">
            <p class="mb-2">设备状态统计</p>
            <div class="flex chart-box mr-2 mt-1 content-center items-center">
                <div ref="chart" class="w-full h-full" :option="options"></div>
            </div>
        </div>
    </div>

</template>
<style lang="less" scoped>
.btn-box {
    :deep(.el-button) {
        font-size: 1.4rem;
        height: 46px;
        padding: 8px 20px;
    }
}

.my-btn {
    background: #cece1d;
    color: #fff;
    border-color: #cece1d;
}

.row-item {
    width: calc(100% / 30);

    span {
        display: inline-block;
        width: 88%;
        height: 38px;
        font-size: 1rem;
        // line-height: 55px;
        color: #fff;
        // border: 1px solid #ddd;
        font-weight: 600;
        text-align: center;
    }

    img {
        display: inline-block;
        width: 88%;
        height: 38px;
        object-fit: fill;
    }

    .bg-white {
        color: #666;
    }

    em{
        font-style: normal;
    }
}

.special {
    .row-item:last-child {
        width: 80px;
    }
}

.table-box,
.cycle-box {
    :deep(.el-table) {
        font-size: 1.3rem;
        background-color: #141c36;
    }

    :deep(.el-table__empty-block) {
        background-color: #141c36;
    }

    :deep(.el-table th.el-table__cell) {
        background-color: #143452;
        color: #79a0c9;
        font-weight: 600;
    }

    :deep(.el-table .el-table__cell) {
        background: #141c36;
        color: #799ac1;
        border-bottom: 0;
        padding: .5rem 0;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
        background-color: #1f4465
    }

    :deep(.el-input__wrapper) {
        background: #1c324f;
        box-shadow: none;
    }

    :deep(.el-input__inner) {
        color: #799ac1;
    }

    :deep(.el-table) {
        --el-table-bg-color: none
    }

    :deep(.el-table tbody .el-table__cell) {
        height: 20px;
        padding: 7px 0;
    }
    :deep(
      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background-color: #2c4a72;
  }
  :deep(.el-table__empty-text){
    color: #79a0c9;
  }
}

.error-info {
    :deep(.el-table .el-table__cell) {
        background: #141c36;
        color: #799ac1;
        border-bottom: 0;
    }
}

.device-box {
    height: 410px;
    background: #141c36;
    padding: 5px;
    font-size: 1.3rem;
    color: #79a0c9;

    span {
        padding: 8px 0;
    }
}

.chart-box {
    background: #141c36;
    height: 410px;
}

.device-row {
    height: 420px;
    overflow: hidden;
}
:deep(.el-table__inner-wrapper::before){
    display: none;
}
</style>